<template>
	<view class="container">
		<view class="title">中药</view>
		<view class="input-wrap">
			<view class="search">
				<u-input class="input" placeholder="输入要查询的中药" shape="circle" prefixIcon="search"></u-input>
			</view>
			<view class="icon">
				<image src="../static/image/search-drug.png"></image>
			</view>
		</view>
		<view class="tab">
			<view class="item">
				<text>性味</text>
				<u-icon name="arrow-down-fill"></u-icon>
			</view>
			<view class="item">
				<text>归经</text>
				<u-icon name="arrow-down-fill"></u-icon>
			</view>
			<view class="item">
				<text>功效</text>
				<u-icon name="arrow-down-fill"></u-icon>
			</view>
			<view class="item">
				<text>部位</text>
				<u-icon name="arrow-down-fill"></u-icon>
			</view>
			<view class="item">
				<text>三品</text>
				<u-icon name="arrow-down-fill"></u-icon>
			</view>
		</view>
		<view class="sort">
			<view class="left-view">
				<scroll-view scroll-y="true" class="scroll-left">
					<view class="header">
						<text>解表药</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
					<view class="scroll-left-item">
						<block v-for="(item,index) in shopdata" :key="index">
							<text class="title">{{item.sort}}</text>
							<view class="sort-flex">
								<block v-for="(items,indexs) in item.secon_classif" :key="indexs">
								<view class="sort-goods">
									<image :src="items.name_image"></image>
									<text class="name">{{items.name}}</text>
								</view>
								</block>
							</view>
						</block>
					</view>
				</scroll-view>
			</view>
			<view class="right-view">
				<scroll-view scroll-y="true" class="scroll-right">
					<block v-for="(item,index) in sortdata" :key="index">
					    <view class="scroll-right-item">{{item.sort}}</view>
					</block>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				sortdata:[
					{sort:'解表'},
					{sort:'清热'},
					{sort:'泻下'},
					{sort:'祛风'},
					{sort:'化湿'},
					{sort:'利水'},
					{sort:'温理'},
					{sort:'理气'},
					{sort:'消食'},
					{sort:'驱虫'},
					{sort:'止血'},
					{sort:'解表'},
					{sort:'清热'},
					{sort:'泻下'},
					{sort:'祛风'},
					{sort:'化湿'},
					{sort:'利水'},
					{sort:'温理'},
					{sort:'理气'},
					{sort:'消食'},
					{sort:'驱虫'},
					{sort:'止血'}
				],
				shopdata:[
					{
						sort:'发散风寒药',
						secon_classif:[
							{
								name_image:'../static/image/nav.png',
								name:'生姜'
							},
							{
								name_image:'../static/image/nav.png',
								name:'桂枝'
							},
							{
								name_image:'../static/image/nav.png',
								name:'桂枝'
							},
							{
								name_image:'../static/image/nav.png',
								name:'桂枝'
							}
						]
					},
					{
						sort:'发散风寒药',
						secon_classif:[
							{
								name_image:'../static/image/nav.png',
								name:'生姜'
							},
							{
								name_image:'../static/image/nav.png',
								name:'桂枝'
							},
							{
								name_image:'../static/image/nav.png',
								name:'桂枝'
							},
							{
								name_image:'../static/image/nav.png',
								name:'桂枝'
							}
						]
					},
					{
						sort:'发散风寒药',
						secon_classif:[
							{
								name_image:'../static/image/nav.png',
								name:'生姜'
							},
							{
								name_image:'../static/image/nav.png',
								name:'桂枝'
							}
						]
					},
					{
						sort:'发散风寒药',
						secon_classif:[
							{
								name_image:'../static/image/nav.png',
								name:'生姜'
							},
							{
								name_image:'../static/image/nav.png',
								name:'桂枝'
							}
						]
					}
				]
			}
		},
	}
</script>

<style lang="scss" scoped>
	.container{
		background-image: url('../static/image/banner.png');
		background-size: cover;
		background-position: center;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		.title{
			font-size: 36rpx;
			font-weight: 700;
			text-align: center;
			padding: 30rpx 0;
		}
		.input-wrap{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;
			box-sizing: border-box;
			.search{
				flex: 1;
				margin-right: 40rpx;
				.input{
					background: #fff;
				}
			}
			.icon{
				image{
					width: 48rpx;
					height: 48rpx;
					vertical-align: middle;
				}
			}
		}
		.tab{
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: 100rpx;
			.item{
				display: flex;
				text{
					font-size: 32rpx;
				}
			}
		}
		.sort{
			display: flex;
			.left-view{
				flex: 1;
				height: 100vh;
				.scroll-left{
					height: 100vh;
					.header{
						display: flex;
						justify-content: space-between;
						align-items: center;
						height: 66rpx;
						padding: 0 30rpx;
						font-size: 32rpx;
						background: orange;
					}
					.scroll-left-item{
						padding: 20rpx 30rpx 60rpx;
						.title{
							font-weight: bold;
							font-size: 28rpx;
							color: #ff0000;
						}
						.sort-flex{
							display: flex;
							flex-wrap: wrap;
							margin-bottom: 20rpx;
							.sort-goods{
								display: flex;
								flex-direction: column;
								align-items: center;
								width: 33%;
								margin-top: 30rpx;
								image{
									width: 176rpx;
									height: 176rpx;
								}
								.name{
									font-size: 28rpx;
									padding-top: 10rpx;
								}
							}
						}
					}
				}
			}
			.right-view{
				width: 150rpx;
				height: 100vh;
				background-color: #f4f4f4;
				.scroll-right{
					height: 100vh;
					.scroll-right-item{
						text-align: center;
						height: 80rpx;
						line-height: 80rpx;
					}
					.active{
						background-color: #fff;
					}
				}
			}
		}
	}
</style>